<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jx.Grid Paging Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../lib/mootools-core.js"></script>
<script type="text/javascript" src="../../lib/mootools-more.js"></script>
<script type="text/javascript" src="../../lib/jxlib.standalone.uncompressed.js"></script>
<script src="js/tests.js" type="text/javascript" charset="utf-8"></script>
<script src="js/locale.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
var grid;
var panel;
var aboutDialog;
var pagingToolbar;

window.addEvent('load', function() {
  
    drawToolbar();
    drawGrid();
    
    window.addEvent('stylesheetChanged', function() {
        if (aboutDialog && aboutDialog.chrome) {
            aboutDialog.close();
            aboutDialog.chrome.dispose();
            aboutDialog.chrome = null;                
        }
    });
    
});
if($(document).getElements('.tabContentActiveExamples').length > 0) {
  $(document).getElements('.tabContentActiveExamples')[0].addEvent('loadAjax', function() {

    drawToolbar();
    drawGrid();

    window.addEvent('stylesheetChanged', function() {
        if (aboutDialog && aboutDialog.chrome) {
            aboutDialog.close();
            aboutDialog.chrome.dispose();
            aboutDialog.chrome = null;
        }
    });

  });
}
</script>
<script id="toolbarScript" type="text/javascript">
function drawToolbar() {
    //here we'll make a paging toolbar.
    pagingToolbar = new Class({

        Extends: Jx.Toolbar,

        options: {
            store: null,
            paginationOptions: {
                ignoreExpiration: true
            },
            parent: 'toolbarArea',
            scroll: false
        },

        init: function () {
            this.parent();
            
            if ($defined(this.options.store)) {
                this.store = this.options.store;
            } else {
                //can't do anything without a store!
                return;
            }

            this.strategy = this.store.getStrategy('paginate');

            if (!$defined(this.strategy)) {
                //it didn't have the strategy so let's add it
                var full = this.store.getStrategy('full');
                if (full) { full.deactivate(); }
                this.strategy = new Jx.Store.Strategy.Paginate(this.options.paginationOptions);
                this.store.addStrategy(this.strategy);
            }

            this.store.addEvent('storeDataLoaded', this.updateToolbar.bind(this));
            
            
        },

        render: function () {
            //create the toolbar
            this.parent();

            this.counter = new Element('div', {
                html: 'Page: 1 of X',
                id: 'counter'
            });
            this.add( 
                new Jx.Button({
                  id: 'start',
                  label: '<<',
                  //image: 'images/asterisk_orange.png',
                  tooltip: 'jump to first page',
                  onClick: function() { 
                    this.strategy.setPage('first'); 
                  }.bind(this)
                }),
                new Jx.Button({
                  id: 'previous',
                  label: '<',
                  //image: 'images/asterisk_orange.png',
                  tooltip: 'previous page',
                  onClick: function() { 
                    this.strategy.setPage('previous'); 
                  }.bind(this)
                }),
                new Jx.Toolbar.Item(this.counter),
                new Jx.Button({
                  id: 'next',
                  label: '>',
                  //image: 'images/asterisk_orange.png',
                  tooltip: 'next page',
                  onClick: function() { 
                      this.strategy.setPage('next');
                  }.bind(this)
                }),
                new Jx.Button({
                  id: 'last',
                  label: '>>',
                  //image: 'images/asterisk_orange.png',
                  tooltip: 'jump to last page',
                  onClick: function() { 
                      this.strategy.setPage('last');
                  }.bind(this)
                })
            );
        },

        updateToolbar: function () {
            this.counter.set('html','Page ' + this.strategy.getPage() + ' of ' + this.strategy.getNumberOfPages());
            this.update();
        }
    });
    
}
</script>
<script id="gridScript" type="text/javascript">
function drawGrid() {
    var parser = new Jx.Store.Parser.JSON();
    var paginate = new Jx.Store.Strategy.Paginate({
        ignoreExpiration: true
    });
    var protocol = new Jx.Store.Protocol.Ajax({
        parser: parser,
        urls: {
            read: 'paging.php'
        }
    });
    var store = new Jx.Store({
        protocol: protocol,
        strategies: [paginate],
        record: Jx.Record
    });
    
  //setup Grid options
  var options = {
      parent: 'gridArea',
      row: {
          useHeaders: true,
          alternateRowColors: true,
          headerColumn: 'id',
          rowHeight: 'auto'
      },
      columns: {
          headerRowHeight: 20,
          useHeaders: true,
          columns: [{
              template: '<span class="jxGridCellContent">ID</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'id',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{id}'
              })
          },{
              template: '<span class="jxGridCellContent">Area</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'area',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{AREA}'
              })
          },{
              template: '<span class="jxGridCellContent">Perimeter</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'perimeter',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{Perimeter}'
              })
          },{
              template: '<span class="jxGridCellContent">Popplace_</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'popplace',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{POPPLACE_}'
              })
          },{
              template: '<span class="jxGridCellContent">Popplace_I</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'popplace-i',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{POPPLACE_I}'
              })
          },{
              template: '<span class="jxGridCellContent">Unique Key</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'uniqueKey',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{UNIQUE_KEY}'
              })
          },{
              template: '<span class="jxGridCellContent">Name</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'name',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{Name}'
              })
          },{
              template: '<span class="jxGridCellContent">Name_E</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'name-e',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{NAME_E}'
              })
          },{
              template: '<span class="jxGridCellContent">Name_F</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'name-f',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{NAME_F_}'
              })
          },{
              template: '<span class="jxGridCellContent">Reg_Code</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'reg-code',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{REG_CODE}'
              })
          },{
              template: '<span class="jxGridCellContent">NTS50</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'nts50',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{NS50}'
              })
          },{
              template: '<span class="jxGridCellContent">Latitude</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'latitude',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{LAT}'
              })
          },{
              template: '<span class="jxGridCellContent">Longitude</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'longitude',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{LONG}'
              })
          },{
              template: '<span class="jxGridCellContent">Sgc_Code</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'sgcCode',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{SGD_CODE}'
              })
          },{
              template: '<span class="jxGridCellContent">Capital</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'capital',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{CAPITAL}'
              })
          },{
              template: '<span class="jxGridCellContent">Pop_Range</span>',
              renderMode: 'fit',
              isEditable: false,
              isSortable: false,
              isResizable: true,
              isHidden: false,
              name: 'popRange',
              renderer: new Jx.Grid.Renderer.Text({
                textTemplate: '{POP_RANGE}'
              })
          }
         ]
      },
      model: store
  };
  //create grid
  var grid = new Jx.Grid(options);
  var tlb = new pagingToolbar({
      store: store
  });
  store.addEvent('storeDataLoaded', function () {
      grid.render();
  });
  store.load();
  
  
  
}
</script>
<style>
    #counter {
        height: 16px;
        line-height: 16px;
        color: black;
        margin-top: 6px;
        margin-right: 2px;
        font-size: 11px;
        font-family: Arial,Verdana,sans-serif;
    }
</style>
</head>
<body>

  <h1>Jx.Grid Paging Toolbar Examples</h1>
  <p>API Reference: <a id="grid-js" href="javascript:void();" title="link to API Reference">Jx.Grid</a></p>
  <p>This example demonstrates using the grid with the paginate strategy to create a custom paging toolbar. 
  Please take note that this is a VERY rudimentary implementation. Developers would be responsible for expanding
  and implementing a toolbar to meet their needs. This is just a proof-of-concept.</p>
  <div id="toolbarArea" class="toolbarBox" style="width: 500px;"></div>
  <div id="gridArea" class="gridBox"></div>

</body>
</html>